<template>
<div class="the-block">
  <p class="title">开启用户认证</p>
  <div class="content">
    <el-form label-width="80px">
      <!-- <el-form-item label="配置名称">
        <el-input v-model="form.label"></el-input>
      </el-form-item> -->
      <el-form-item label="认证信息">
        <el-input v-model="operate.post.vipCertInfo" placeholder="输入用户认证信息(用于体现用户身份)"></el-input>
      </el-form-item>
      <el-form-item label="认证类型">
        <el-radio-group v-model="operate.post.vipType" @change="operateFn.timeTypeChange">
          <el-radio v-for="item in userList.vipType" :key="item.key" :label="item.key">{{item.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item align="center">
        <el-button @click="operateFn.submitPre">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</div>
</template>

<script setup>
import { reactive, ref, watchEffect } from "vue";
import { updateCustomerIdentity,getCustomerDetail } from "@/api/videouser";
import { userList }  from "@/utils/tool.js";
import { ElMessage } from "element-plus";
import { onBeforeRouteUpdate, useRouter } from "vue-router";

const router = useRouter();
const params = ref({});
const query = ref({});
watchEffect(()=>{
  params.value = router.currentRoute.value.params;
})
watchEffect(()=>{
  query.value = router.currentRoute.value.query;
})

const {$data: operate,$fn:operateFn } = (()=>{
  const $data = reactive({
    post:{
      customerId: null, 
      vipType: 0, // VIP类型:0:普通,1:类型A,2:类型B,3:类型C,4:类型D,为0时关闭
      vipCertInfo: "",
    }
  })
  const $fn = {
    getDetails() {
      getCustomerDetail(params.value.id).then((res) => {
        if (res.code === 0) {
          console.log("res detail:",res.data);
          $data.post.vipType = res.data.vipType;
          $data.post.vipCertInfo = res.data.vipCertInfo;
        }
      });
    },
    submitPre(){
      if($data.post.vipType!==0 && $data.post.vipCertInfo===""){
        ElMessage.warning("请输入认证信息！");return;
      }
      $fn.submitData();
    },
    submitData(){
      const req = {
        ...$data.post,
        customerId: params.value.id,
      }
      updateCustomerIdentity(req).then(res=>{
        if(res.code===0){
          ElMessage.success("修改成功！");
        }
      })
    }
  }
  return {
    $data,
    $fn
  }
})();

function init(){
  operateFn.getDetails();
}
init();

// 从相同路由进入（params不同，query.view相同），如/a/b/1?view=1 => /a/b/2?view=1
onBeforeRouteUpdate((to, from, next) => {
  if(to.params.id !== from.params.id && to.query.view === from.query.view){
    params.value.id = to.params.id;
    query.value = to.query;
    init();
  }
  next();
});
</script>

<style scoped lang="scss">
.the-block {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 12px;
  .title {
    padding: 8px;
  }
  .content{
    padding: 8px;
  }
}
</style>